// 图片预览组件
import React from "react";

type PreviewPicProps = {
    picSrc: string;
    targetId: string;
};

function PreviewPic(props: PreviewPicProps){

    const { picSrc, targetId } = props;

    return (
        <div className=" modal bd-example-modal-lg fade" id={`previewBigPic${targetId}`} role="dialog" aria-hidden="true">
            <div className="modal-dialog modal-dialog-centered justify-content-center" role="document">
                <div className="modal-content">
                    <div className="modal-header p-0">
                        <button style={{outline: 'none'}} type="button" className="close pt-3 pb-3 pr-4" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div className="modal-body text-center">
                        <img 
                            src={picSrc}
                            style={{maxHeight: "100%", maxWidth: "100%"}}
                            alt="没有加载出来丫 >_< !" 
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}

export default PreviewPic;